@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300&display=swap");

:root {
  --ink: #05040b;
  --ink-soft: #0b0913;
  --paper: #f7f4ff;
  --muted: #c4bfd0;
  --violet: #a78bfa;
  --cyan: #579c92;
  --rose: #d4a49d;
  --line: rgba(255,255,255,.11);
  --glow: 167, 139, 250;
  --nav: rgba(17,18,24,.54);
  --card: rgba(255,255,255,.018);
  --outline: rgba(240,225,255,.72);
}

/* Infinite Forms uses the violet chamber tone. Keep its card typography gallery-consistent. */
body[style*="167,139,250"] .work-grid { align-items:stretch; }
body[style*="167,139,250"] .work-card {
  min-height:290px;
  text-align:center;
  align-items:center;
}
body[style*="167,139,250"] .work-card > div { width:100%; margin:auto 0; }
body[style*="167,139,250"] .work-card h3 {
  font-size:clamp(1.55rem,2.6vw,2.15rem);
  line-height:1.08;
  letter-spacing:-.035em;
}
body[style*="167,139,250"] .work-card p {
  max-width:34ch;
  margin-left:auto;
  margin-right:auto;
}
body[style*="167,139,250"] .work-index,
body[style*="167,139,250"] .work-open { align-self:center; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background:
    radial-gradient(circle at 18% 7%, rgba(111,78,255,.17), transparent 31rem),
    radial-gradient(circle at 84% 24%, rgba(54,211,223,.09), transparent 34rem),
    var(--ink);
  font-family: "Poppins", Avenir, ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

a { color: inherit; }
button { font: inherit; }

.aurora {
  position: fixed;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .13;
  pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
.aurora.one { left: -17rem; top: 20%; background: #8b5cf6; }
.aurora.two { right: -21rem; top: 0; background: #579c92; animation-delay: -8s; }
@keyframes drift { to { transform: translate(7rem, 6rem) scale(1.18); } }

.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.nav {
  position: sticky;
  top: 12px;
  z-index: 10;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 38%,rgba(87,156,146,.07)),
    var(--nav);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  box-shadow:
    0 13px 38px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28);
}
.brand {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  letter-spacing:.24em;
  font-size:.82rem;
  text-transform:uppercase;
  font-weight:400;
  color:transparent;
  background:linear-gradient(90deg,var(--paper) 0 50px,var(--cyan) 50px 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.brand .mara-m { color:inherit; font-style:normal; text-shadow:none; }
.jf-pill {
  width:42px;
  height:30px;
  flex:0 0 42px;
  margin-right:4px;
  display:block;
  border:1px solid transparent;
  border-radius:999px;
  background-color:transparent;
  background-image:url("0 prismara assets/jf-signature-transparent.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:37px 29px;
  box-shadow:none;
  filter:brightness(0) saturate(100%) invert(57%) sepia(18%) saturate(980%) hue-rotate(124deg) brightness(88%) contrast(86%);
  transition:transform .25s,border-color .25s,box-shadow .25s,filter .25s;
}
.jf-pill:hover { transform:translateY(-1px); filter:brightness(0) saturate(100%) invert(72%) sepia(27%) saturate(600%) hue-rotate(124deg) brightness(97%) contrast(91%); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .76rem; font-weight:600; letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
.nav-links a:hover { color: white; }
.theme-toggle { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.16); color:#d7e4e1; background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 16px rgba(0,0,0,.16); cursor:pointer; display:grid; place-items:center; transition:color .2s,border-color .2s,transform .25s,box-shadow .25s; }
.theme-toggle:hover { color:white; border-color:rgba(87,156,146,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 20px rgba(87,156,146,.22); transform:rotate(12deg); }

.hero {
  min-height: 76vh;
  display: grid;
  align-items: center;
  position: relative;
  padding: 96px 0 82px;
}
.eyebrow { color: var(--cyan); font-size: .69rem; letter-spacing: .25em; text-transform: uppercase; }
.hero .eyebrow, .collection-hero .eyebrow { font-weight:600; filter:saturate(1.2) brightness(.82); text-shadow:0 0 18px rgba(var(--glow),.16); }
h1, h2, .serif { font-family: "Poppins", Avenir, ui-sans-serif, sans-serif; font-weight: 200; }
h1 { margin: 18px 0 22px; max-width: 920px; font-size: clamp(4.1rem, 10vw, 8.7rem); line-height: .82; letter-spacing: -.075em; }
h1 em { display: block; margin-left: .22em; color: transparent; font-family:inherit; font-style:normal; font-weight:200; -webkit-text-stroke: 1px var(--outline); text-shadow: 0 0 60px rgba(var(--glow),.3); }
.type-line { min-height:.92em; white-space:nowrap; }
.type-cursor { display:inline-block; width:.055em; height:.72em; margin-left:.08em; vertical-align:-.02em; background:var(--cyan); box-shadow:0 0 16px rgba(87,156,146,.75); -webkit-text-stroke:0; animation:type-blink .78s steps(1,end) infinite; }
@keyframes type-blink { 50% { opacity:0; } }
.lede { max-width: 590px; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight:500; line-height: 1.8; }
.lede strong { color:var(--paper); font-weight:500; }
.hero-meta { margin-top: 44px; display: flex; gap: 12px; flex-wrap: wrap; }
.metric-pill {
  min-width:245px;
  min-height:76px;
  padding:13px 19px;
  display:flex;
  align-items:center;
  gap:15px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.24),0 8px 24px rgba(0,0,0,.12);
}
.metric-pill:first-child { border-color:rgba(87,156,146,.5); background:linear-gradient(145deg,rgba(87,156,146,.2),rgba(255,255,255,.025)); }
.metric-pill:last-child { border-color:rgba(212,164,157,.48); background:linear-gradient(145deg,rgba(212,164,157,.18),rgba(255,255,255,.025)); }
.metric-pill strong { font-size:2.25rem; line-height:1; font-weight:200; letter-spacing:-.06em; color:var(--paper); }
.metric-pill > span { display:flex; flex-direction:column; color:#e5edeb; font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase; }
.metric-pill small { margin-top:4px; color:var(--muted); font-size:.62rem; font-weight:400; letter-spacing:.11em; }
.chip {
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 99px;
  padding: 10px 16px;
  color: #e5edeb;
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.15);
}
.chip:nth-child(1) { border-color:rgba(87,156,146,.55); background:linear-gradient(145deg,rgba(87,156,146,.26),rgba(255,255,255,.025)); }
.chip:nth-child(2) { border-color:rgba(212,164,157,.52); background:linear-gradient(145deg,rgba(212,164,157,.22),rgba(255,255,255,.025)); }
.chip:nth-child(3) { border-color:rgba(87,156,146,.38); background:linear-gradient(145deg,rgba(87,156,146,.15),rgba(212,164,157,.12)); }

.flow-scene { position:absolute; inset:4% -8% 3% 31%; pointer-events:none; overflow:visible; opacity:.82; }
.flow-bloom { position:absolute; border-radius:48% 52% 63% 37%; filter:blur(58px); mix-blend-mode:screen; animation:flow-drift 15s ease-in-out infinite alternate; }
.flow-bloom.a { width:55%; height:48%; right:8%; top:5%; background:rgba(87,156,146,.28); }
.flow-bloom.b { width:50%; height:55%; left:2%; bottom:2%; background:rgba(139,92,246,.31); animation-delay:-5s; }
.flow-bloom.c { width:33%; height:42%; right:18%; bottom:11%; background:rgba(212,164,157,.22); animation-delay:-9s; }
.flow-lines { position:absolute; inset:2% 0 0; width:100%; height:100%; filter:drop-shadow(0 0 18px rgba(87,156,146,.19)); }
.flow-lines path { fill:none; stroke:url(#flow-gradient); stroke-width:1.15; opacity:.25; vector-effect:non-scaling-stroke; stroke-dasharray:6 8; animation:river 17s linear infinite; }
.flow-lines path:nth-child(2) { animation-duration:23s; animation-direction:reverse; opacity:.18; }
.flow-lines path:nth-child(3) { animation-duration:29s; opacity:.13; }
@keyframes flow-drift { to { transform:translate(-9%,8%) scale(1.18) rotate(8deg); filter:blur(72px) hue-rotate(20deg); } }
@keyframes river { to { stroke-dashoffset:-280; } }

.intro { padding: 80px 0 30px; display: grid; grid-template-columns: .8fr 1.4fr; gap: 80px; border-top: 1px solid var(--line); }
.intro h2 { max-width:420px; font-size:clamp(1.65rem,3vw,2.6rem); margin:0; line-height:1.16; letter-spacing:-.035em; }
.intro p { color: var(--muted); font-size: 1rem; line-height: 1.9; max-width: 700px; margin: 8px 0 0; }
.intro-copy { max-width:720px; }
.intro-copy p + p { margin-top:18px; }

.collections, .works { padding: 70px 0 120px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head h2 { margin:0; font-size:clamp(2.5rem,5vw,4.4rem); }
.section-head span { color:var(--muted); font-size:.73rem; letter-spacing:.18em; text-transform:uppercase; }
.collection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.collection-card {
  min-height: 390px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 30px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 0 0,rgba(255,255,255,.12),transparent 21%),
    radial-gradient(circle at 100% 0,rgba(185,190,194,.1),transparent 19%),
    linear-gradient(140deg,rgba(var(--tone),.14),rgba(255,255,255,.025) 56%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.24);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.collection-card::before { content:""; position:absolute; width:250px; height:250px; right:-40px; top:-50px; border-radius:50%; background:radial-gradient(circle,rgba(var(--tone),.34),transparent 68%); filter:blur(12px); transition:transform .5s; }
.collection-card::after { content:""; position:absolute; inset:auto -20% -42% -20%; height:78%; border:1px solid rgba(var(--tone),.3); border-radius:50% 50% 0 0; box-shadow:0 -18px 60px rgba(var(--tone),.08); }
.collection-card:hover { transform:translateY(-7px); border-color:rgba(var(--tone),.56); box-shadow:0 26px 100px rgba(var(--tone),.12); }
.collection-card:hover::before { transform:scale(1.25) translate(-12px,12px); }
.card-num { position:relative; z-index:2; color:rgba(255,255,255,.76); font-size:.68rem; font-weight:500; letter-spacing:.2em; }
.card-art { position:absolute; z-index:0; top:42px; right:24px; width:min(47%,255px); color:rgb(var(--tone)); opacity:.58; filter:drop-shadow(0 0 18px rgba(var(--tone),.18)); transition:opacity .35s,transform .5s cubic-bezier(.2,.8,.2,1); }
.card-art svg { display:block; width:100%; height:auto; overflow:visible; }
.card-art path,.card-art circle,.card-art ellipse,.card-art rect { fill:none; stroke:currentColor; stroke-width:1.25; vector-effect:non-scaling-stroke; }
.collection-card:hover .card-art { opacity:.84; transform:translateY(4px) scale(1.035); }
.card-art-photo {
  top:12px;
  right:-8px;
  width:66%;
  height:67%;
  overflow:visible;
  opacity:.42;
  filter:none;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  -webkit-mask-image:radial-gradient(ellipse at 69% 34%,#000 22%,rgba(0,0,0,.9) 43%,rgba(0,0,0,.42) 64%,transparent 82%);
  mask-image:radial-gradient(ellipse at 69% 34%,#000 22%,rgba(0,0,0,.9) 43%,rgba(0,0,0,.42) 64%,transparent 82%);
}
.card-art-photo img { width:100%; height:100%; display:block; object-fit:contain; object-position:100% 0; filter:saturate(.35); }
.collection-card:hover .card-art-photo { opacity:.5; transform:translateY(3px) scale(1.02); }
.card-bottom { position:relative; z-index:2; text-shadow:none; }
.collection-card h3 { font-family:"Poppins",Avenir,sans-serif; font-weight:200; font-size:clamp(2.4rem,4.7vw,5rem); line-height:.9; letter-spacing:-.06em; margin:0 0 17px; }
.collection-card p { color:#d0cad9; max-width:430px; font-weight:500; line-height:1.65; margin:0; }
.arrow { position:absolute; right:28px; bottom:28px; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18); transition:background .2s, transform .25s; }
.collection-card:hover .arrow { background:rgba(var(--tone),.22); transform:rotate(-35deg); }

.back { display:inline-flex; gap:9px; align-items:center; margin:42px 0 20px; color:var(--muted); text-decoration:none; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.back:hover { color:white; }
.collection-hero { min-height:52vh; padding:60px 0 76px; display:grid; align-items:end; border-bottom:1px solid var(--line); position:relative; }
.collection-hero h1 { font-size:clamp(4rem,10vw,9rem); margin-bottom:28px; }
.collection-hero h1 em { margin-left:0; }
.collection-hero .lede { max-width:680px; }
.collection-hero > div { position:relative; z-index:2; }
.collection-hero-art {
  position:absolute;
  z-index:1;
  top:11%;
  right:0;
  width:min(44vw,500px);
  height:78%;
  pointer-events:none;
  opacity:.5;
  overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse at 58% 46%,#000 18%,rgba(0,0,0,.88) 42%,rgba(0,0,0,.32) 66%,transparent 84%);
  mask-image:radial-gradient(ellipse at 58% 46%,#000 18%,rgba(0,0,0,.88) 42%,rgba(0,0,0,.32) 66%,transparent 84%);
}
.collection-hero-art img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:saturate(.7) contrast(1.04) brightness(1.02);
  transform-origin:58% 46%;
  animation:hero-art-breathe 8s ease-in-out infinite alternate;
}
.synesthetic-collection .collection-hero-art img {
  filter:url(#synesthetic-ripple) saturate(.72) contrast(1.05) brightness(1.03);
}
.undulating-collection .collection-hero-art img {
  filter:url(#collection-ripple) saturate(.7) contrast(1.04) brightness(1.02);
}
.time-capsule-collection .collection-hero-art {
  top:22%;
  right:-1%;
  width:min(40vw,450px);
  height:68%;
  overflow:visible;
  opacity:.52;
  -webkit-mask-image:none;
  mask-image:none;
}
.time-capsule-collection .collection-hero-art::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:5% 17% 3% 18%;
  border:1px solid rgba(229,194,137,.52);
  border-radius:50%;
  transform:rotate(-7deg);
  background:radial-gradient(ellipse at 65% 34%,rgba(255,255,255,.12),transparent 58%);
  box-shadow:inset 0 0 30px rgba(255,255,255,.08),0 0 36px rgba(200,171,119,.12);
}
.time-capsule-collection .collection-hero-art img {
  object-position:74% 40%;
  -webkit-mask-image:radial-gradient(ellipse at 70% 35%,#000 16%,rgba(0,0,0,.9) 33%,rgba(0,0,0,.28) 53%,transparent 68%);
  mask-image:radial-gradient(ellipse at 70% 35%,#000 16%,rgba(0,0,0,.9) 33%,rgba(0,0,0,.28) 53%,transparent 68%);
}
.hero-art-filter { position:absolute; width:0; height:0; overflow:hidden; }
@keyframes hero-art-breathe {
  0% { transform:scale(1.02) translate3d(0,0,0) rotate(-.45deg); }
  52% { transform:scale(1.075) translate3d(-1.4%,1%,0) rotate(.38deg); }
  100% { transform:scale(1.12) translate3d(-2.7%,-.8%,0) rotate(-.15deg); }
}

.work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.work-card {
  min-height: 330px;
  padding: 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:22px;
  text-decoration:none;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 0 0,rgba(255,255,255,.15),transparent 25%),
    radial-gradient(circle at 100% 0,rgba(196,200,204,.1),transparent 22%),
    radial-gradient(circle at 0 100%,rgba(170,175,180,.07),transparent 21%),
    radial-gradient(circle at 100% 100%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(150deg,rgba(var(--tone),.085),rgba(255,255,255,.018));
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(0,0,0,.28),0 14px 36px rgba(0,0,0,.08);
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.work-card::before { content:""; position:absolute; width:150px; height:150px; border-radius:50%; right:-44px; top:-44px; background:radial-gradient(circle,rgba(var(--tone),.4),transparent 68%); filter:blur(7px); }
.work-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; border:1px solid transparent; background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 18%,transparent 80%,rgba(210,214,217,.16)) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.54; }
.work-card:hover { transform:translateY(-6px); border-color:rgba(var(--tone),.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 25px 80px rgba(var(--tone),.12); }
.featured-work { min-height:350px; border-color:rgba(var(--tone),.32); }
.work-index { position:relative; z-index:1; font-size:.66rem; color:rgba(255,255,255,.72); font-weight:500; letter-spacing:.2em; transition:color .3s,text-shadow .3s; }
.work-card h3 { margin:0 0 12px; font-family:"Poppins",Avenir,sans-serif; font-size:1.95rem; font-weight:400; letter-spacing:-.04em; line-height:1.05; }
.work-card p { margin:0; color:var(--muted); font-weight:500; line-height:1.65; font-size:.94rem; }
.work-open { display:block; width:100%; margin-top:20px; padding:11px 14px; border:1px solid rgba(var(--tone),.3); border-radius:999px; color:rgb(var(--tone)); background:rgba(var(--tone),.06); text-align:center; font-size:.67rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; transition:color .3s,background .3s,border-color .3s,box-shadow .3s,transform .18s; }
.work-card:hover .work-open { border-color:rgba(var(--tone),.6); background:rgba(var(--tone),.12); box-shadow:0 0 18px rgba(var(--tone),.22),inset 0 0 16px rgba(var(--tone),.08); animation:backlit 1.5s ease-in-out infinite alternate; }
.work-card:active .work-open { transform:scale(.965); box-shadow:0 0 28px rgba(var(--tone),.42),inset 0 0 22px rgba(var(--tone),.18); }
@keyframes backlit { from { box-shadow:0 0 10px rgba(var(--tone),.14),inset 0 0 8px rgba(var(--tone),.04); } to { box-shadow:0 0 28px rgba(var(--tone),.35),inset 0 0 18px rgba(var(--tone),.12); } }

/* Quantum Veil pilot: a quiet 2x2 salon with room for each work to breathe. */
.quantum-collection .work-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:960px;
}
.quantum-collection .work-card,
.quantum-collection .featured-work { min-height:275px; }
.quantum-collection .work-card::before {
  width:180px;
  height:180px;
  right:-54px;
  top:-60px;
  opacity:.72;
  filter:blur(18px);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}
.quantum-collection .work-copy { position:relative; z-index:2; max-width:78%; }
.quantum-collection .work-card:hover::before { transform:scale(1.12) translate(-5px,6px); }

.note { margin:40px 0 0; padding:22px 24px; border-left:1px solid rgb(var(--tone)); color:var(--muted); background:rgba(var(--tone),.045); line-height:1.7; }
.footer { border-top:1px solid var(--line); padding:34px 0 44px; display:flex; justify-content:space-between; color:#777184; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; }

.time-card { min-height:390px; }
.static-grid { columns:3 280px; column-gap:16px; }
.static-work { display:block; width:100%; padding:0; color:inherit; text-align:left; break-inside:avoid; margin:0 0 16px; position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:var(--card); cursor:zoom-in; }
.static-work img { display:block; width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s; }
.static-work:hover img { transform:scale(1.035); filter:saturate(1.08); }
.static-caption { position:absolute; inset:auto 0 0; padding:55px 18px 17px; color:white; background:linear-gradient(transparent,rgba(3,3,8,.9)); opacity:0; transform:translateY(8px); transition:opacity .3s,transform .3s; }
.static-work:hover .static-caption { opacity:1; transform:none; }
.static-caption strong { display:block; font-size:1.05rem; font-weight:300; letter-spacing:-.02em; }
.static-caption span { font-size:.62rem; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.65); }
.lightbox { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:28px; background:rgba(3,3,8,.9); backdrop-filter:blur(24px); }
.lightbox.open { display:grid; }
.lightbox-inner { max-width:min(1180px,94vw); max-height:91vh; display:grid; grid-template-columns:minmax(0,1fr) 290px; overflow:hidden; border-radius:24px; border:1px solid rgba(255,255,255,.14); background:#080710; box-shadow:0 40px 140px rgba(0,0,0,.55); }
.lightbox img { width:100%; height:100%; max-height:91vh; object-fit:contain; background:#030309; }
.lightbox-copy { padding:30px; display:flex; flex-direction:column; justify-content:flex-end; }
.lightbox-copy h3 { color:#fff; font-weight:200; font-size:2rem; margin:0 0 10px; }
.lightbox-copy p { color:#aaa4b5; line-height:1.7; font-size:.85rem; }
.lightbox-close { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.18); color:white; background:rgba(8,7,16,.55); cursor:pointer; font-size:1.2rem; }

html[data-theme="light"] { --ink:#f4f6f5; --ink-soft:#edf1ef; --paper:#15131b; --muted:#4c4755; --line:rgba(22,20,30,.14); --nav:rgba(244,246,245,.68); --card:rgba(0,0,0,.02); --outline:rgba(24,21,31,.68); }
html[data-theme="light"] body { background:radial-gradient(circle at 16% 8%,rgba(124,58,237,.12),transparent 34rem),radial-gradient(circle at 86% 18%,rgba(13,148,136,.11),transparent 34rem),var(--ink); }
html[data-theme="light"] .nav { border-color:rgba(255,255,255,.82); box-shadow:0 13px 38px rgba(42,54,52,.12),inset 0 1px 0 white,inset 0 -1px 0 rgba(48,67,64,.15); }
html[data-theme="light"] .nav-links a:hover { color:#111018; }
html[data-theme="light"] .collection-card, html[data-theme="light"] .work-card { background:linear-gradient(145deg,rgba(var(--tone),.11),rgba(255,255,255,.45)); }
html[data-theme="light"] .card-art-photo { opacity:.34; }
html[data-theme="light"] .card-num { color:#15131b; font-weight:600; text-shadow:0 1px 0 rgba(255,255,255,.62); }
html[data-theme="light"] .collection-card p { color:#4d4856; }
html[data-theme="light"] .chip { color:#273c39; border-color:rgba(63,90,86,.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(44,67,63,.14),0 8px 22px rgba(52,73,69,.1); }
html[data-theme="light"] .chip:nth-child(2) { color:#674842; border-color:rgba(155,105,97,.34); }
html[data-theme="light"] .theme-toggle { color:#304d48; border-color:rgba(63,90,86,.25); background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(87,156,146,.08)); }
html[data-theme="light"] .jf-pill { background-color:rgba(220,226,223,.68); border-color:rgba(74,91,87,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 4px 14px rgba(0,0,0,.09); filter:none; }
html[data-theme="light"] .metric-pill > span { color:#273c39; }
html[data-theme="light"] .collection-hero-art { opacity:.4; }
html[data-theme="light"] .work-index { color:#412af5; font-weight:500; text-shadow:0 0 16px rgba(65,42,245,.12); }
html[data-theme="light"] .work-open { color:#1a0fb8; border-color:rgba(65,42,245,.22); background:rgba(65,42,245,.055); }
html[data-theme="light"] .work-card:hover .work-open { color:#1a0fb8; border-color:rgba(65,42,245,.58); background:rgba(65,42,245,.1); box-shadow:0 0 22px rgba(65,42,245,.24),inset 0 0 16px rgba(65,42,245,.08); }

@media (max-width: 820px) {
  .nav-links a:not(.jf-pill):not(:last-child) { display:none; }
  .hero { min-height:70vh; padding-top:60px; }
  .flow-scene { inset:7% -35% 8% 12%; opacity:.52; }
  .intro { grid-template-columns:1fr; gap:25px; }
  .collection-grid, .work-grid { grid-template-columns:1fr; }
  .quantum-collection .work-grid { grid-template-columns:1fr; }
  .quantum-collection .work-copy { max-width:88%; }
  .time-card { grid-column:auto; }
  .collection-card { min-height:330px; }
  .lightbox-inner { grid-template-columns:1fr; max-height:92vh; overflow:auto; }
  .lightbox img { max-height:68vh; }
  .section-head { align-items:start; flex-direction:column; }
  .jf-pill { width:38px; height:28px; flex-basis:38px; margin-right:0; background-size:34px 27px; }
  .collection-hero-art { right:-18%; top:18%; width:72vw; height:58%; opacity:.34; }
  .time-capsule-collection .collection-hero-art { right:-22%; top:27%; width:68vw; height:53%; opacity:.38; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .synesthetic-collection .collection-hero-art img { filter:saturate(.72) contrast(1.05) brightness(1.03); }
  .undulating-collection .collection-hero-art img { filter:saturate(.7) contrast(1.04) brightness(1.02); }
}